<template>
  <div class="personal_purse">
    <my-header :showBack="true" :title="$t('lang.gucmentBill')" ></my-header>
    <div >
      <van-list v-show="recordList.length>0" v-model="loading" :finished="finished" @load="loadMore" :offset="10" class="trad_list"> 
        <van-collapse v-model="activeNames" class = "typeBox">
          <van-collapse-item 
            v-for = "(i,index) in recordList"
            :key = "index"
            class = "scoll"
          >
            <div slot="title">
              <nav class = "font-e"><div>{{$t("lang.transactionType")}}:</div> <span class="type">{{ i.profitRemark }}</span></nav>
              <section class = "font-e"><div>{{$t("lang.Time")}}:</div><span class="type type-b">{{ i.createTime }}</span></section>
            </div>
            <div class= "center">
                <aside>{{ $t('lang.dayMoney') }}</aside>
                <article class= "typeNum">{{ i.profitAmount | numFilter }}</article>
            </div>
            <div class= "center" v-if= "i.sourceName">
                <aside>{{  $t('lang.drelevantUsers') }}</aside>
                <article class= "typeNum">{{ i.sourceName}}</article>
            </div>
          </van-collapse-item>
        </van-collapse>
      </van-list>
      <div class="no_data" v-show="recordList.length==0"><img src="../../assets/img/my/nodata.png" alt="" srcset="">{{$t("lang.NoData")}}</div>
    </div>
  </div>
</template>
   
<script>
import header from "@/components/header";
import { Toast } from 'vant';
import ClipboardJS from 'Clipboard'

export default {
  components: {
    "my-header": header
  }, 
  data(){
    return{
			userInfo:{},
			tradingList:[	],
      activeName: '1',
      activeNum: '1',
			activeNames: ['0'],
			jyListData:[1,2,3,],
			loading: false,
      finished: true,
      // 获取到数据
      recordList: [],
      searchData: {
        pageNo: 1, //当前页
        pageSize: 30, //每页30条
        type: 11
      },
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy.MM.dd hh:mm");
    },
    numFilter(value) {
    // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(3)
      return realVal
    }

  },
  mounted(){
    this.init();
  },
  methods:{
		init() {
      this.searchData.pageNo = 1;
      console.log(this.searchData.pageNo)
      this.$ajax(this.$api.selectGucProfit, this.searchData).then(res => {
        this.loading = false;
        if (res.code === 0) {
          if (res.msg && res.msg.list.length > 0) {
            console.log(res.msg.lastPage)
            console.log(res.msg)
						this.recordList = res.msg.list;
            this.finished = this.searchData.pageNo == res.msg.lastPage;
            this.loading = false;
            console.log(this.recordList)
          }
        } else {
          this.recordList = [];
        }
      });
    },
    loadMore: function() {
      this.searchData.pageNo += 1;
      // this.loading = true;
      this.$ajax(this.$api.selectGucProfit, this.searchData).then(res => {
        this.loading = false;
        if (res.code === 0) {
          if (res.msg && res.msg.list.length > 0) {
            this.recordList = this.recordList.concat(res.msg.list);
            this.finished = this.searchData.pageNo == res.msg.lastPage;
            this.loading = false;
          }
        }
      });
    },
  }
}
</script>

<style lang='less' scoped>
.trad_list{
	background: #f6f6f6;
		box-sizing: border-box;padding:0px 12px;background:#ffffff;margin-top:0px;
		h3{color: #333333;line-height: 26px;}
		li{padding: 10px 0;border-bottom: 1px solid #eeeeee;}
		.nflex{display: flex;justify-content:space-between ;
			p{line-height: 24px;color: #999999;}
			span{color: #333333;}
			.npadd{padding: 15px 0;}
			.tiphui{color: #999999;}
			.tipred{color: #FF5458;}
			.tipgren{color: #00BA4F;}
		}
		.buybtn{color: #FF4954;border: 1px solid #FF4954;border-radius: 20px;padding: 0 6px ;}		
}
.jytime{
	h3{color: #333333;font-size: 14px;}
	p{color: #CCCCCC;}
  }
.typeBox{
  // 渲染标题
  .font-e{
    display: flex;
    color:#666;
    div{
      width:70px;
    }
    .type{
      color:red;
      &.type-b{
        color:#999;
      }
    }
  }
  // 渲染内容
  .center{
    display: flex;
    margin-bottom:5px;
    aside{
      color:#999;
      width:200px;
    }
    article{
      color:#111;
      &.typeNum{
        color:red;
      }
    }
  }
  .scoll{
    padding:5px 0px;
  }
}
</style>
